﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Droppable - Revert draggable position</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        .draggable
        {
            width: 150px;
            height: 150px;
            position: relative;
            background-color: #7A879F;
        }
        .droppable
        {
            width: 150px;
            height: 150px;
            margin: 0 auto;
            border: 2px solid #333;
        }
        
        .content
        {
            overflow: auto;
            clear: both;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#content_a .draggable").bind("click", function (e) {

                if ($(this).width() == 100) {
                    $(this).css({ width: "150px", height: "150px" });
                    $(this).css({ left: "0", top: "0" });
                } else {
                    $(this).css({ width: "100px", height: "100px" });

                    offset = $("#content_a .droppable").offset();

                    left_big = (e.pageX - offset.left);
                    top_big = (e.pageY - offset.top);


                    left_small = left_big / $("#content_a .droppable").width() * $(this).width();
                    top_small = top_big / $("#content_a .droppable").height() * $(this).height();

                    leftdiff = left_big - left_small;
                    topdiff = top_big - top_small;


                    var newpos = {
                        left: leftdiff,
                        top: topdiff
                    };

                    $(this).css(newpos);
                }
            });
        });

        $(function () {
            $("#content_b .draggable").bind("click", function (e) {

                if ($(this).width() == 100) {
                    $(this).css({ width: "150px", height: "150px" });
                    $(this).css({ left: "0", top: "0" });
                    $("#content_b .droppable").css({ width: "150px", height: "150px", margin: "0px", left: "-300px", top: "0px" });

                    //$("#content_c .draggable").css({ left: "-300px",top: "0px"});
                } else {
                    $(this).css({ width: "100px", height: "100px" });

                    offset = $("#content_b .droppable").offset();

                    left_big = (e.pageX - offset.left);
                    top_big = (e.pageY - offset.top);


                    left_small = left_big / $("#content_b .droppable").width() * $(this).width();
                    top_small = top_big / $("#content_b .droppable").height() * $(this).height();

                    leftdiff = left_big - left_small;
                    topdiff = top_big - top_small;


                    var newpos = {
                        left: leftdiff,
                        top: topdiff
                    };

                    $(this).css(newpos);
                    var position = calcOffset($(this), $("#dropContianer"));
                    //$("#content_c .draggable").css(position);

                    $("#content_b .droppable").css(position);

                    $("#content_b .droppable").css({ width: "100px", height: "100px", margin: "0px" });
                    //                   

                    //                    

                    $(this).css({ left: "0", top: "0" });
                }
            });
        });

        function calcOffset(src, target) {
            return {
                "left": parseInt(src.offset().left - target.offset().left, 10) + "px",
                "top": parseInt(src.offset().top - target.offset().top, 10) + "px"
            }
        }

       

    </script>
</head>
<body>
    <div class="content" id="content_a">
        <div class="droppable">
            <div class="draggable">
            </div>
        </div>
    </div>
    <hr />
    <div class="content" id="content_b">
        <div style="width: 150px; height: 150px; margin: 0 auto; border: 0px solid #333;"
            id="dropContianer">
            <div class="droppable" style="left: -300px; position: relative; border-width: 0">
                <div class="draggable">
                </div>
            </div>
        </div>
    </div>
    <hr />
    <div class="content" id="content_c">
        <div class="droppable">
            <div class="draggable" style="position: relative; right: -300px">
            </div>
        </div>
    </div>
</body>
</html>
